<template>
  <div ref="myChart" class="radar-echart" />
</template>

<script>
import {getRoomList} from '@/api/rooms'
const echarts = require('echarts')
import Rooms from '@/utils/constant/rooms'
export default {
 async mounted() {
   await this.getData()
    // 初始化一个echarts容器
    const myChart = echarts.init(this.$refs.myChart)
    myChart.setOption({
      title: {
        text: '入住次数'
    },
    tooltip: {},
    xAxis: {
        data: this.roomTypes
    },
    yAxis: {},
    series: [{
        name: '入住次数',
        type: 'bar',
        data: this.data
    }]
    })
    // myChart.setOption({
    //         xAxis: {
    //     type: 'category',
    //     data: this.roomTypes
    // },
    // yAxis: {
    //     type: 'value'
    // },
    // series: [{
    //     data: this.data,
    //     type: 'line'
    // }]
    // })
  },
  data(){
    return{
      data:[],
      roomTypes:Rooms.type.map(item=>item.value),
    }
  },
  methods:{
   async getData(){
     const rst= await getRoomList()
    let bigRoom=0  //大床房
    let DBRoom=0 //漂流房
    let loverRoom=0 //情侣
    let richRoom=0  //总统套间
    let waterRoom=0  //水床房
    let beautyRoom=0 //美女陪聊房
    let handsome=0 //帅哥
    let ElectronicRoom=0 //电竞房
    rst.forEach(item=>{
      switch(item.type){
        case 1:{
              bigRoom+=item.time?item.time:0
          return
        }
        case 2:{
            DBRoom+=item.time?item.time:0
          return
        }
        case 3:{
           loverRoom+=item.time?item.time:0
          return
        }
        case 4:{
            richRoom+=item.time?item.time:0
          return
        }
        case 5:{
          waterRoom+=item.time?item.time:0
        }
         case 6:{
          beautyRoom+=item.time?item.time:0
        }
         case 7:{
          handsome+=item.time?item.time:0
        }
         case 8:{
          ElectronicRoom+=item.time?item.time:0
        }
      } 
    })
     this.data=[bigRoom,DBRoom,loverRoom,richRoom,waterRoom,beautyRoom,handsome,ElectronicRoom]
    // console.log("this.data",this.data);
    }
  }
}
</script>

<style>
.radar-echart {
  width: 500px;
  height: 400px;
}
</style>
